import { Input } from "@heroui/react";
import { motion } from "framer-motion";
export default function LoginInput({
  inputName,
  type,
  label,
  error_list,
  variant,
  setVariant,
}) {
  return (
    <>
      <Input
        name={inputName}
        classNames={{
          base: "w-[50%]",
          label: "!text-gray-100",
          errorMessage: "text-orange-600",
        }}
        isRequired
        value={variant}
        onValueChange={setVariant}
        label={label}
        variant="underlined"
        type={type}
        isInvalid={error_list.length > 0}
        isClearable
        errorMessage={() => (
          <motion.div layout>
            <motion.ul>
              {error_list.map((error, i) => (
                <motion.li key={`${type}-${i}`}>{error}</motion.li>
              ))}
            </motion.ul>
          </motion.div>
        )}
      ></Input>
    </>
  );
}
